{%extends "base.html"%}
{%block body%}


<script type="text/javascript"> 
var myObj = {{ ways }}  ; 
var parkingArray = {{ route.parking }};
var restroomsArray = {{ route.restrooms }};
var myGPX = {{ gpxPoints }};


var helpContent = "<br><br><a href='#' class='uline' onclick='hideHelp()'>  Close Help </a>  <br><br>Welcome to Rambletown!    <br><br>   This site provides great trail graphics by combining Google maps and Picasa web albums for you to <i> visualize </i> and explore trails in their surrounding environment.  <br><br> Scroll down the list of routes on the left side of the screen. Press a Play button to run an animation that simultaneously shows the map location and picture. A map of the route will be drawn. <br><br> <img src='/static/buttonPlay.jpg'> <br><br>Or, just press the map button to create a static Google map and the html code to draw it on your own web page. <br><br> To look up a particular region, or type of trail, use the filter buttons to select your criteria and then press the Submit button. <br><br>  <img src='/static/filtershot.jpg'><br><br>  During the animation, control buttons can stop and back up. <br><br> <img src='/static/viewerShow2.jpg'><br><br>The Google Map is live, and can be zoomed and recentered as desired.  <br><br> Click an image to display the higher resolution original. <br> <br> Slow internet connection?  After the map and images finish loading, just press the stop button, then the restart button to run smoothly.<br><br> <img src='/static/viewerShow.jpg'><br><br> Distances are approximate.  <br> <br> Rambletown was a winner of the American Trails Website Contest for 2008 in the category 'Trail tour or virtual visit' <br><br>  <a href='#' class='uline' onclick='hideHelp()'>  Close Help </a>";

var aboutContent = "<br><br> <a href='#' class='uline' onclick='hideHelp()'>  Close About </a> <br><br>Rambletown is a web application that was built and runs on Google's infrastructure. Anyone can create an account and publish an application that can use up to 500MB of storage and 5 million page views a month..free!  For more information about this service, visit <a href='http://code.google.com/appengine'> http://code.google.com/appengine </a><br><br>The Rambletown website combines two web services, the Google Maps API and Picasa Web Albums to create a map and slideshow.  It operates on a simple 'connect-the-dots' concept, drawing lines between the GPS positions of the photographs.<br><br>The built-in editor allows any user with a valid Google account to create their own routes and save them.  It uses rich internet AJAX to create a comfortable experience for the user.  Features such as clicking on the map to set the latitude and longitude saves time and increases accuracy.  If the original photographs were geocoded by the device, that information can be used and completely automate the process!<br><br>If you are interested in the functionality of this web application for your own business uses, please contact me to discuss how to set it up at theaellen@hotmail.com<br><br>Please feel free to create your own routes! After you create them, you can link from your own website.  This website does not store photographs, it only saves the link it gets from the Picasa feed. <br><br> To access the editor, you must first press the 'Sign in' button.<br><br>                           <a href='#' class='uline' onclick='hideHelp()'>  Close About </a>";


 </script>
				
<script type="text/javascript" src="/static/tmaps.js"></script>



</head>



</head>

<body onload="newLoad( {{ route.latitude }}, {{ route.longitude }}, {{route.zoom}} )" link="white" vlink="white" alink="red"  display: inline;>

<div id="appFrame">

{% include "title.html" %}

<div id="leftImages" >
		
	<div id="helpNode"> </div>

   	<div id="routeLabels" name="routeLabels">
		<h1>{{route.routeName}}, {{ route.locationName }}  </h1> 
 	</div>
	<div id="photoBox" >

	  <div id="picFrame">
		<a href="" id="getImg" name="getImg" style="padding:0px; border:0px"  onclick="stopShow();" > 
		<img src="" id="photo" name="photo" width=100%;  title="Click to view original image" alt="picture of location">    </a> 
	
		<div id="descriptionBox" > </div> 
		<div id="mileageBox"> </div>
		<div id="picControls"> 
		  <ul><li><button ID="backBut";  class="nav" name="backBut"; style="visibility: hidden"; onclick="backPic();">
				&larr;</button>
		  <li><button ID="nextBut";  class="nav" name="nextBut"; style="visibility: visible"; onclick="nextPic();">
				&rarr;</button>
		  <li><button ID="stopBut";  class="nav" name="stopBut"; style="visibility: hidden"; onclick="stopShow();">
				||</button>
		  <li><button ID="playBut"; class="nav" name="playBut"; style="visibility: visible"; onclick="slideShow();">
				PLAY</button>
		  <li><button ID="restartBut"; class="nav" name="restartBut"; style="visibility: hidden"; onclick="restartShow();">
				RESTART</button>
		  <li> 
		  </ul>
		</div>  
	  </div>	
	

	<div id="rightSidebar" class="banner">
	 		Add A Comment:   

		{%if user %}
			<b> &lt;{{user}}&gt;</b>

			

	  		<textarea id="tbxComment" name="tbxComment" value="" onClick="dirtyComment()" COLS=58 style="border:1px" />
				 </textarea>
	 		
			<button ID="btnComment"; class="nav" name="btnComment"; style="visibility: hidden"; onclick="addComment( '{{ route.key }}' )">
				Save</button>
	 		


		{% else %}
			{%if sign_in%} <a class="uline" href="{{sign_in}}" >Sign in</a> {%endif%}
		{%endif%}
		<div id="commentPlace">
		{%for comment in comments.comments reversed%}  
			<ul>
				<li> {{ comment.comment }}, <i class="tinylabel"> by {{ comment.shortname }} on {{comment.date }} </i>
			</ul>
		{%endfor%}
		</div>
	</div>
</div>

<div id ="jbox">
 <textarea  id="JSONbox" name="JSONbox" value = "" rows=5 cols=60 style="visibility:hidden" > {{ ways }} </textarea>
</div>
</div>	
{% include "builderMap.html" %}
</div>

</body>
{% endblock %}

